<template>
  <div class="wrapper">
    <div class="top">
      <image
        class="pay-success"
        :src="'https://mini.jiaw.com/img/7305020211206.jpg'"
      ></image>
      <div class="tips">
        <p>支付成功</p>
        <p>￥ {{ money }} 元</p>
      </div>
      <div class="order">
        <p>订单编号: {{ orderNum }}</p>
        <p></p>
        <p>支付时间: {{ time }}</p>
      </div>
    </div>

    <div class="coupon">
      <div
        class="coupon-item"
        v-for="item of recommendList"
        :key="item.storeId"
      >
        <div class="left">
          <div class="left" v-if="item.coupon.disType === 1">
            <p>
              <span style="font-size:50rpx">
                {{ item.coupon.disValue / 10 }}
              </span>
              折
            </p>
            <p>任意消费</p>
          </div>
          <div class="left" v-if="item.coupon.disType === 2">
            <p>¥{{ item.coupon.disValue }}</p>
            <p>满{{ item.coupon.minAmount }}可用</p>
          </div>
        </div>
        <div class="middle">
          <div class="store-name">
            {{ item.brandsName }}
            【{{ item.positionCode }}】
            {{ item.coupon.name }}
          </div>
          <div class="store-time">
            有效期:{{ item.coupon.startTime }}-{{ item.coupon.endTime }}
          </div>
          <div class="address"></div>
        </div>
        <button>立即领取</button>
      </div>
    </div>
    <div class="more-coupon" @click="toMoreCoupon">
      更多优惠券
    </div>
  </div>
</template>

<script>
import { recommendStoreCoupon } from '@/api'
import { mapState } from 'vuex'
export default {
  onLoad(e) {
    this.orderNum = e.id
    this.money = e.money
    this.time = e.time
  },
  data() {
    return {
      userId: '',
      orderNum: '',
      money: '',
      time: '',
      recommendList: []
    }
  },
  created() {
    const { id } = this.userInfo
    this.userId = id
    this.recommendCoupon()
  },
  methods: {
    toMoreCoupon() {
      uni.navigateTo({
        url: '/pages/package/coupon-discount/index'
      })
    },
    recommendCoupon() {
      recommendStoreCoupon(this.userId).then(res => {
        this.recommendList = res.data
      })
    }
  },
  computed: {
    ...mapState(['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  padding-bottom: 100rpx;
  background: #f6f8f8;
  min-height: 100vh;
  .top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .pay-success {
    width: 150rpx;
    height: 150rpx;
    margin-top: 50rpx;
  }
  .tips {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    p {
      margin: 5px 0;
      background: #f6f8f8;
    }
  }
  .order {
    padding: 10px;
    border-bottom: 1px solid rgb(209, 207, 207);
    border-top: 1px solid rgb(209, 207, 207);
    p {
      margin: 10px 0;
      background: #f6f8f8;
    }
  }
  .coupon {
    padding: 10px;

    .coupon-item {
      height: 100px;
      display: flex;
      align-items: center;
      flex-direction: row;
      border: 1px solid #f0b3aa;
      margin: 30rpx 0;
      border-radius: 20rpx;
      padding: 10rpx;
      background: #fff;
      .left {
        color: #e65a4b;
      }
      .middle {
        flex: 1;
        padding: 0 30rpx;
        .store-time {
          color: rgb(187, 185, 185);
          font-size: 22rpx;
        }
      }
      button {
        line-height: 45rpx;
        width: 120rpx;
        background: #22ac38;
      }
    }
  }
  .more-coupon {
    background: #ca3d33;
    color: #fff;
    width: 200rpx;
    border-radius: 10rpx;
    margin: 0 auto;
    text-align: center;
    padding: 10rpx 30rpx;
  }
}
</style>
